<template>
  <div class="logo-container" :style="{ width: isCollapse ? '64px' : '220px' }">
    <router-link to="/">
      <div class="logo-wrapper" :class="{ 'is-collapse': isCollapse }">
        <el-icon class="sidebar-logo"><Van /></el-icon>
        <div v-if="!isCollapse" class="title-container">
          <span class="sidebar-title">{{ title }}</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'
import { Van } from '@element-plus/icons-vue'

defineOptions({
  name: 'Logo'
})

const appStore = useAppStore()

const isCollapse = computed(() => !appStore.sidebar.opened)
const title = computed(() => appStore.settings.title || '货物监控系统')
</script>

<style lang="scss" scoped>
.logo-container {
  position: relative;
  height: 60px;
  background: var(--ba-bg-color-overlay);
  text-align: center;
  overflow: hidden;
  transition: width 0.3s;
  
  .logo-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 16px;
    
    .sidebar-logo {
      width: 32px;
      height: 32px;
      font-size: 24px;
      color: var(--el-color-primary);
      flex-shrink: 0;
    }
    
    .title-container {
      height: 100%;
      display: flex;
      align-items: center;
      transition: opacity 0.3s;
      white-space: nowrap;
      margin-left: 10px;
    }
    
    .sidebar-title {
      color: var(--el-text-color-primary);
      font-weight: 600;
      font-size: 16px;
      line-height: 60px;
    }
    
    &.is-collapse {
      justify-content: center;
      padding-left: 0;
    }
  }
}
</style>
